<template>
  <div class="quality-info">
    <div class="info-view-header">
      <TaskChatTab v-model="detailActiveTab" :data="detailTabList"></TaskChatTab>
      <el-button @click="editFunc" v-if="detailActiveTab === 0" :type="editShow ? '' : 'primary'" size="small">
        {{ editShow ? '取消编辑' : '编 辑' }}
      </el-button>
    </div>
    <div class="quality-content">
      <template v-if="detailActiveTab === 0">
        <div class="info-item quality-info-detail">
          <div class="quality-info-detail-title">
            <span>#{{ props.quality.qaCode }}</span>
            <span>{{ props.quality.qaTitle }}</span>
          </div>
          <RichTextViewer :view-html="props.quality.qaDetail"></RichTextViewer>
        </div>
        <div class="info-item">
          <el-descriptions :column="4" border>
            <el-descriptions-item label="优先级" :span="2" width="80px">
              <span :style="priorityColor(props.quality.qaPriority)" style="padding: 5px 10px">
                {{ dict.translate('task_priority', props.quality.qaPriority) }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="指派给" :span="2" width="80px">
              {{ getUserName(1) }}
            </el-descriptions-item>
            <el-descriptions-item label="截止日期" :span="2">
              {{ props.quality.planEnd }}
            </el-descriptions-item>
            <el-descriptions-item label="跟踪者" :span="2">
              {{ getUserName(2) }}
            </el-descriptions-item>
            <el-descriptions-item label="当前进度" :span="2">
              <el-progress
                :percentage="props.quality.completePercent"
                :color="formatterColor(props.quality.qaStatus)"></el-progress>
            </el-descriptions-item>
            <el-descriptions-item label="测试人" :span="2">
              {{ getUserName(3) }}
            </el-descriptions-item>
            <el-descriptions-item label="关联任务" :span="2">
              {{ props.quality.tcTaskInfos?.find((obj) => obj.taskId)?.taskTitle }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="info-item" v-if="editShow">
          <div class="submit-btn-wrap register-working-hours">
            <div class="card-title">编辑</div>
            <span @click="submitEdit">
              <el-icon><Select /></el-icon>
              提交
            </span>
          </div>
          <AddQualityQuestion
            ref="editQulity"
            :ifAdd="false"
            :projectId="projectId"
            :projectMemberList="projectMemberList"
            :editData="quality"
            @refresh="refreshFunc"
            source="detail" />
        </div>
      </template>
      <template v-if="detailActiveTab === 1">
        <div class="info-item">
          <div class="submit-btn-wrap register-working-hours">
            <div class="card-title">工时登记</div>
            <span @click="submitFunc">
              <el-icon><Select /></el-icon>
              提交
            </span>
            <!-- <el-button type="primary" @click="submitFunc" class="submit-btn">提交</el-button> -->
          </div>
          <el-form ref="hourAddformRef" :model="hourAddform" :rules="hourAddRules" inline label-width="100px">
            <el-form-item label="日期：" class="width-thityfive">
              {{ dayjs().format('YYYY-MM-DD') }}
            </el-form-item>
            <el-form-item label="类型：" prop="workType" class="width-thityfive">
              <el-select v-model="hourAddform.workType" clearable class="width-full">
                <el-option
                  v-for="(item, index) in dict.dictMap['work_type']"
                  :key="index"
                  :label="item.dictLabel"
                  :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工时：" prop="wrHours" class="width-thityfive">
              <el-input-number
                v-model="hourAddform.wrHours"
                :min="0"
                :max="Number(dict.dictMap['work_time'][4]['dictValue'])"
                placeholder="请输入"
                :controls="false"
                class="width-full" />
            </el-form-item>
            <el-form-item label="完成度：" prop="completePercent" class="width-thityfive">
              <el-input-number
                v-model="hourAddform.completePercent"
                placeholder="请输入"
                :controls="false"
                style="width: calc(100% - 20px)"
                :min="0"
                :max="100" />
              &nbsp;%
            </el-form-item>
            <el-form-item label="说明：" prop="remark" class="width-eighty">
              <el-input v-model="hourAddform.remark" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </div>
        <div class="info-item">
          <div class="card-title">工时明细</div>
          <el-table :data="quality.tcWorkingRecords" :height="245">
            <el-table-column label="登记人" prop="registrants"></el-table-column>
            <el-table-column label="日期" prop="selectDay" align="center">
              <template v-slot="{ row }">
                <span>{{ dayjs(row.selectDay).format('YYYY-MM-DD') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="wrStatus">
              <template v-slot="{ row }">
                <span>{{ dict.translate('work_status', row.wrStatus) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="分类" prop="workType" align="center">
              <template v-slot="{ row }">
                <span>{{ dict.translate('work_type', row.workType) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="登记工时(小时)" prop="wrHours" align="center">
              <template v-slot="{ row }">
                <span>{{ row.wrHours }}小时</span>
              </template>
            </el-table-column>
            <el-table-column label="更新进度(%)" prop="completePercent" align="center">
              <template v-slot="{ row }">
                <span>{{ row.completePercent }}%</span>
              </template>
            </el-table-column>
            <el-table-column label="登记时间" prop="createdTime" width="200"></el-table-column>
          </el-table>
        </div>
      </template>
      <div v-if="detailActiveTab === 2" class="info-item task-info-fill">
        <Dynamic :data="quality.tcTaskChangeRecords"></Dynamic>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { useDictionary } from '@/use/use-dictionary'
import { formatterColor, priorityColor } from '@/utils/task-utils.js'
import { addWorkHourRecord } from '@/assets/api/work-hour-record'
import { Select } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const props = defineProps({
  quality: Object,
  projectId: String,
  projectMemberList: Array,
})
const emit = defineEmits(['refresh'])
const dict = useDictionary(['task_priority', 'work_type', 'work_status', 'work_time'])

function getUserName(code) {
  return props.quality.tcQaMembers
    ?.filter((obj) => obj.userTypeCode === code)
    ?.map((item) => item.taskUserName)
    ?.join(',')
}

const detailActiveTab = ref(0)
const detailTabList = [
  { label: '基本', name: 0 },
  { label: '工时', name: 1 },
  { label: '动态', name: 2 },
]

const hourAddformRef = ref()
let hourAddform = ref({})
const hourAddRules = reactive({
  workType: [
    {
      required: true,
      message: '请选择类型',
      trigger: 'change',
    },
  ],
  wrHours: [{ required: true, message: '请输入工时', trigger: 'blur' }],
  completePercent: [{ required: true, message: '请输入完成度', trigger: 'blur' }],
})

function submitFunc() {
  //工时登记提交
  hourAddformRef.value.validate((valid) => {
    if (valid) {
      hourAddform.value = {
        ...hourAddform.value,
        selectDay: dayjs().format('YYYY-MM-DD'),
        taskId: props.quality.qaId,
        taskType: 2, //质量单
      }
      addWorkHourRecord(hourAddform.value).then((res) => {
        if (res.code === 200) {
          ElMessage.success('登记成功')
          emit('refresh', props.quality.qaId)
          hourAddformRef.value.resetFields()
        }
      })
    } else {
      ElMessage({
        message: '请填写内容',
        type: 'warning',
      })
    }
  })
}

const editShow = ref(false)
function editFunc() {
  //编辑质量单
  editShow.value = !editShow.value
}
const editQulity = ref()
function submitEdit() {
  editQulity.value.submitFunc()
}
function refreshFunc() {
  emit('refresh', props.quality.qaId)
  editShow.value = false
}
</script>
<style scoped lang="scss">
.quality-info {
  padding-bottom: 40px;
  height: 650px;
  .info-view-header {
    padding: 0 0 20px;
    @include use-flex(center, space-between);
  }
  .quality-content {
    height: calc(100% - 41px);
    :deep(.elp-image-viewer__mask) {
      background-color: var(--elp-bg-color);
      opacity: 1;
    }
  }
  .info-item {
    padding: 10px;
    border-radius: 8px;
    background-color: var(--elp-bg-color);
    & + .info-item {
      margin-top: 10px;
    }
  }
  .card-title {
    padding: 10px;
    color: var(--elp-color-primary-light-3);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
  }
  .quality-info-detail {
    min-height: 120px;
    .quality-info-detail-title {
      font-size: 18px;
      span:first-child {
        margin-right: 5px;
      }
    }
  }
  .task-info-fill {
    height: 100%;
  }
  .register-working-hours {
    color: var(--elp-color-primary-light-3);
    cursor: pointer;
    margin-bottom: 5px;
    span {
      padding: 0 5px;
      & + span {
        border-left: var(--elp-border);
      }
    }
    .elp-icon,
    .svg-icon {
      margin-right: 5px;
    }
  }
  :deep(.elp-descriptions) {
    .elp-descriptions__cell {
      border: none;
    }
    .elp-descriptions__label {
      background: none;
    }
  }
  .width-full {
    width: 100%;
  }
  .width-thityfive {
    width: 35%;
  }
  .width-eighty {
    width: 80%;
  }
  .submit-btn-wrap {
    // text-align: right;
    @include use-flex(center, space-between);
    .submit-btn {
      padding: 0 40px;
    }
  }
}
</style>
